<template>
  <!-- 云贝中心 -->
  <div id="Yunbei">
    <van-nav-bar title="云贝中心"
                 @click-left="$router.go(-1)">
      <template #left>
        <van-icon style="transform: rotate(90deg);"
                  size="18"
                  name="down"
                  color="#000" />
      </template>
    </van-nav-bar>
    <div class="sginInfo">
      <span>
        连续签到<span class="fontBold"> {{signInData.days}} </span>天,
        明天签到可得到<span class="fontBold"> {{signInData.shells}} </span>云贝
      </span>
      <p style="padding-top:20px"><span class="YunbeiNum">{{userPoint.balance}}</span> 云贝</p>
    </div>

    <main class="Yunbei-content">
      <van-tabs v-model="active">
        <van-tab title="花云贝">内容 1</van-tab>
        <van-tab title="赚云贝">
          <div class="recommend">
            <span class="task">推荐任务</span>
            <van-grid :border="false"
                      :column-num="3">
              <van-grid-item v-for="(item,index) in expenseData.slice(0,3)"
                             :key="index">
                <van-image width="60"
                           height="60"
                           :src="item.webPicUrl" />
                <p style="font-size:14px">{{item.taskName}}</p>
                <van-tag color="#FEF2F0"
                         text-color="red"
                         size="large"
                         round>
                  + {{item.taskPoint}}云贝
                </van-tag>
              </van-grid-item>
            </van-grid>
          </div>

          <div class="other">
            <span class="task">其他任务</span>
            <van-cell :border="false"
                      v-for="(item,index) in expenseData.slice(3,999)"
                      :key="index">
              <template #icon>
                <van-image width="50"
                           height="50"
                           :src="item.webPicUrl" />
              </template>
              <template #title>
                <span>{{item.taskName}}</span>
              </template>
              <template #label>
                <span>{{item.taskDescription}}</span>
              </template>
              <template #right-icon>
                <van-tag style="height:30px;margin-top:8px"
                         color="#FEF2F0"
                         text-color="red"
                         size="medium"
                         round>
                  + {{item.taskPoint}}云贝
                </van-tag>
              </template>
            </van-cell>
          </div>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
import {
  getYunbei,
  getAccount,
  getYunbeiIncome,
  YunbeiExpenditure,
} from '@/api/Yunbei'
export default {
  name: 'Yunbei',
  data() {
    return {
      signInData: {}, // 签到
      userPoint: {}, // 账户信息
      expenseData: [], // 云贝获得
      active: 0,
    }
  },
  methods: {
    handleInitData() {
      let cookie = this.$store.state.userInfo.cookie
      // 获取账户签到信息
      getYunbei(cookie).then((res) => {
        this.signInData = res.data
      })
      // 获取用户云贝数
      getAccount(cookie).then((res) => {
        this.userPoint = res.userPoint
      })
      // 云贝收入
      YunbeiExpenditure(cookie).then((res) => {
        this.expenseData = res.data
      })
      // getYunbeiIncome(cookie).then(res => {
      // })
    },
  },
  created() {
    this.handleInitData()
  },
}
</script>

<style scoped>
#Yunbei [class*='van-hairline']::after {
  border: none;
}
.sginInfo {
  text-align: center;
  font-size: 13px;
  margin-top: 10px;
}
.fontBold {
  font-weight: 600;
}
.YunbeiNum {
  font-size: 25px;
  font-weight: 600;
}
.Yunbei-content {
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  padding: 0 0 2px 0;
}
.recommend,
.other {
  width: 90%;
  padding: 10px;
  margin: 10px auto;
  background: #fff;
  border-radius: 14px;
}
.task {
  font-weight: 700;
  padding: 5px 0 0 12px;
}
</style>